<template>
  <div class="goodsclass">
    <van-nav-bar title="商品分类" fixed placeholder>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <div class="mian">
      <div class="infoleft">
        <van-sidebar v-model="activeKey" >
          <van-sidebar-item
            v-for="item in categories"
            :key="item.categoryId"
            @click="selectMenu(item.categoryId)"
          >
            <template #title>
              {{ item.categoryName }}
            </template>
          </van-sidebar-item>
        </van-sidebar>
      </div>
      <div class="inforight">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <template>
              <!-- 一开始的效果 -->

              <!-- 点击的时候切换的效果 -->
              <van-row
                v-for="(item, idx) in categoriesItem.secondLevelCategoryVOS"
                :key="idx"
              >
                <van-col span="24">
                  <div class="newsinfor">
                    <p class="classfiy">{{ item.categoryName }}</p>
                    <div
                      v-for="it in item.thirdLevelCategoryVOS"
                      :key="it.categoryId"
                    >
                      <van-col span="8"  @click="goto(`./search?categoryId=${it.categoryId}`)">
                        <img
                          src="//s.weituibao.com/1583591077131/%E5%88%86%E7%B1%BB.png"
                          style="width: 60px; height: 60px"
                        />
                        <p>{{ it.categoryName }}</p>
                      </van-col>
                    </div>
                  </div>
                </van-col>
              </van-row>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeKey: 0,
      categories: [],
      categoriesItem: [],
    };
  },
  created() {
    this.$axios.get("/categories").then(({ data }) => {
      this.categories = data;
      this.categoriesItem = data[0];
    });
  },
  methods: {
   goto(url) {
      this.$router.push(url);
    },
    // 传过来的是id 从this.categories筛选出相同id的数据
    selectMenu(index) {
      this.categoriesItem = this.categories.filter((item) => {
        return index === item.categoryId;
      });
      this.categoriesItem = this.categoriesItem[0];
    },
  },
};
</script>
<style scoped lang="scss">
.goodsclass {
  .mian {
    display: flex;
    // background-color: rgba(0, 0, 0, .1);
    // 左侧栏
    .infoleft {
      width: 28%;
      // height: 100%;
      // background-color: rgba(0, 0, 0, .1);
      // position: fixed;
      .van-sidebar {
        width: 28%;
        position: fixed;
        .van-sidebar-item {
          font-size: 16px;
          padding: 20px 5px;
        }
      }
    }
    // 右侧栏
    .inforight {
      flex: 1;
      height: 100%;
      .swiper-wrapper {
        margin-left: 5px;
        .classfiy {
          font-size: 18px;
        }
      }
      // background-color: rgba(0, 0, 0, 0.1);
      // padding: 10px;
      // .van-row {
      //   background-color: #fff;
      //   margin-bottom: 10px;
      //   border-radius: 10px;
      //   .van-col {
      //     text-align: center;
      //     .newsinfor {
      //       .classfiy {
      //         text-align: left;
      //         padding: 0px 10px;
      //       }
      //       div {
      //         p {
      //           font-size: 16px;
      //           line-height: 40px;
      //           margin: 0px;
      //         }
      //       }
      //     }
      //   }
      // }
    }
  }
}
</style>